<template>
    <a-layout class="jobManageRoot">
        <a-layout-content  style="flex-direction: column;display: flex;">
            <PageHeader>

                <a-button type="primary" v-has-permission="'job:add'" @click="addVisible=true">创建定时任务</a-button>
            </PageHeader>
            <div ref="tableWrapper"  style="flex: 1;overflow-y: auto">

                <a-table
                        :pagination="false"
                        :scroll="{ y : (this.$refs.tableWrapper ? this.$refs.tableWrapper.offsetHeight - 120:0  ) }"
                        :rowKey="(record) => {return record.jobId}"
                        :columns="columns" :dataSource="table.records"    >

                <span slot="jobStatus" slot-scope="text, record">
                    <a-tag color="red" v-if="text == 'STOP' " >停止</a-tag>
                    <a-tag color="orange" v-if="text == 'PAUSE' ">暂停</a-tag>
                    <a-tag color="green" v-if="text == 'RUNNING' ">运行中</a-tag>
                </span>

                <span slot="jobId" slot-scope="text, record" class="oper">

                    <a-icon type="play-circle" v-if="record.jobStatus == 'PAUSE' || record.jobStatus == 'STOP' " @click="resumeJob(text)" />

                    <a-icon type="pause-circle" v-if="record.jobStatus == 'RUNNING' " @click="pauseJob(text)" />

                    <a-icon type="stop" v-if="record.jobStatus == 'RUNNING' " @click="stopJob(text)" />

                     <a-popconfirm title="确认删除此任务吗" v-has-permission="'job:delete'" @confirm="deleteJob(text)"
                                               okText="确认" cancelText="取消">
                        <a-icon type="delete"  theme="twoTone"  twoToneColor="#f50" title="删除"/>
                    </a-popconfirm>

                </span>

                </a-table>
            </div>
            <a-pagination v-model="table.current" :total="table.total" :pageSize="table.size" @change="loadJobs"/>

        </a-layout-content>

        <a-drawer
                width="350"
                :destroyOnClose="true"
                :maskClosable="true"
                placement="right"
                title="添加任务"
                @close="addVisible=false"
                :visible="addVisible">

            <JobAdd ref="addJob"  @ok="addVisible=false;loadJobs()"></JobAdd>

            <div class="drawerBottomWrapper">
                <a-button @click="()=>{this.$refs.addJob.submitData()}" type="primary">
                    提交
                </a-button>
            </div>
        </a-drawer>

    </a-layout>
</template>

<script>
    import JobAdd from './JobAdd'
    import {
        Layout,
        Form, DatePicker,Input,Button,Icon,Radio,TreeSelect,
        Tag,
        Pagination,
        Popconfirm,
        Table,
        Drawer,message

    } from 'ant-design-vue';

    export default {
        name: "JobManage",
        components:{
            JobAdd,
            ATag:Tag,
            ALayout:Layout,
            ALayoutSider:Layout.Sider,
            ALayoutContent:Layout.Content,
            ALayoutHeader:Layout.Header,
            APagination:Pagination,
            ARadioButton:Radio.Button,
            ARadioGroup:Radio.Group,
            AFormItem:Form.Item,
            AForm:Form,
            ADatePicker:DatePicker,
            AInput:Input,
            AButton:Button,
            AIcon:Icon,
            ATreeSelect:TreeSelect,
            APopconfirm:Popconfirm,
            ATable:Table,
            ADrawer:Drawer
        },
        data(){

            return {
                addVisible:false,
                columns:[{
                    title:'任务名称',
                    dataIndex:'jobName',
                    width:'20%'
                },
                    {
                        title:'任务类',
                        dataIndex:'jobClass',
                        width:'20%'
                    },
                    {
                        title:'corn表达式',
                        dataIndex:'jobCorn',
                        width:'20%'
                    },
                    {
                        title:'任务状态',
                        dataIndex:'jobStatus',
                        width:'10%',
                        scopedSlots:{customRender:'jobStatus'}
                    },
                    {
                        title:'操作',
                        width:'20%',
                        dataIndex:'jobId',
                        scopedSlots:{customRender:'jobId'}
                    }
                ],
                table: {
                    current: 1,
                    size: 10,
                    total: 0,
                    records: []
                },
            };
        },
        mounted(){
          this.loadJobs();
        },
        methods:{

            loadJobs(){
                let params = new URLSearchParams();

                params.append("current", this.table.current);
                params.append("size", this.table.size);

                this.$axios.get("/schedule/job/getJobList", params)
                    .then(d => {
                        if (d.data.status == 0) {
                            let pageData = d.data.data;
                            this.table = pageData;
                        }

                    })
                    .catch(e => {

                        message.error("任务数据加载失败");
                    })
            },


            deleteJob(jobId){
                this.$axios.delete("/schedule/job/deleteJob?jobId=" + jobId)
                    .then(d=>{

                        let result = d.data;
                        if(result.status == 0){
                            message.success(result.message);
                            this.loadJobs();
                        }else{
                            message.error(result.message);
                        }

                    },e=>{

                        message.error("删除失败" + e.message);
                    })
            }
            ,
            stopJob(jobId){
                this.$axios.put("/schedule/job/stopJob?jobId=" + jobId)
                    .then(d=>{

                        let result = d.data;
                        if(result.status == 0){
                            message.success(result.message);
                            this.loadJobs();
                        }else{
                            message.error(result.message);
                        }

                    },e=>{

                        message.error("任务中断失败" + e.message);
                    })
            }
            ,
            pauseJob(jobId){
                this.$axios.put("/schedule/job/pauseJob?jobId=" + jobId)
                    .then(d=>{

                        let result = d.data;
                        if(result.status == 0){
                            message.success(result.message);
                            this.loadJobs();
                        }else{
                            message.error(result.message);
                        }

                    },e=>{

                        message.error("任务暂停失败" + e.message);
                    })
            }
            ,
            resumeJob(jobId){
                this.$axios.put("/schedule/job/resumeJob?jobId=" + jobId)
                    .then(d=>{

                        let result = d.data;
                        if(result.status == 0){
                            message.success(result.message);
                            this.loadJobs();
                        }else{
                            message.error(result.message);
                        }
                    },e=>{

                        message.error("任务恢复失败" + e.message);
                    })
            }
        }
    }
</script>

<style scoped>

    .jobManageRoot{

    }

    .drawerBottomWrapper {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 4px 4px;
    }

    .oper >>> .anticon{

        margin-right: 16px;
        font-size: 20px;
        cursor: pointer;
    }

    >>>.ant-table-header{
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
        overflow: hidden !important;
    }
    >>>.ant-table-body{
        overflow-y: auto !important;
    }
    >>>.ant-pagination{
        display: flex;
        justify-content: flex-end;
    }
</style>